<template>
  <div class="app">
    <merchantHeader/>
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3 style="text-align:center">订单详情</h3>
            </div>
            <div class="yuansdj">
              <h4 style="font-size:16px;margin:10px 0px 10px 5px">订单管理</h4>
              <div class="yuansdj_btm">
                <h5>收货地址</h5>
                <div class="yuansdj_address" style="margin-bottom:25px">
                  <span>{{address}}</span>
                  <span>{{names}}</span>
                  <span>{{phones}}</span>
                </div>
                <h5>订单信息</h5>
                <div class="yuansdj_address">
                  <span>订单编号: {{codings}}</span>
                  <span>下单ID: {{id}}</span>
                  <span>下单时间: {{times}}</span>
                </div>
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column prop="product" label="产品"></el-table-column>
                  <el-table-column prop="attribute" label="产品属性"></el-table-column>
                  <el-table-column prop="status" label="状态"></el-table-column>
                  <el-table-column prop="price" label="单价"></el-table-column>
                  <el-table-column prop="nums"></el-table-column>
                </el-table>
                <div>
                  <div class="yuansdj_shu">
                    <span>订单总价</span>
                    {{priceAll}}
                  </div>
                  <div class="yuansdj_shu">
                    <span>优惠</span>
                    {{discounts}}
                  </div>
                  <div class="yuansdj_shu">
                    <span>实付款</span>
                    {{practical}}
                  </div> 
                </div>
              </div>
              <div class="logistics">
                <h5 style="margin-left:2.5%">物流信息</h5>
                <el-form ref="form" label-width="80px">
                  <el-form-item label="发货方式:">
                    {{expressage}}
                  </el-form-item>
                  <el-form-item label="发货公司:">
                    {{shipments}}
                  </el-form-item>
                  <el-form-item label="快递单号:">
                    {{odd}}
                  </el-form-item>
                  <el-form-item label="发货公司:" style="margin-bottom:0px">
                    <el-row v-for="(itm,index) in trace" :key="index">
                      <el-col :span="5">{{itm.dates}}</el-col>
                      <el-col :span="5">{{itm.times}}</el-col>
                      <el-col :span="5">{{itm.status}}</el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      colors: "#f56c6c",
      data: "88",
      address: "湖北省武汉市光谷步行街1334号",
      names: "王大水牛",
      phones: 12345678901,
      codings: "JD74395719YJ",
      id: "MGH9785",
      times: "2020-07-31",
      tableData: [{
          product: '产品名称',
          attribute: '颜色:红色;尺码:S',
          status: '待收货',
          price:'￥219.90',
          nums:2
        }],
      priceAll:"￥429.80",
      discounts:"预定立减￥40",
      practical:"￥289.80",
      expressage:"快递",
      shipments:"中通",
      odd:749264801027855,
      trace:[
        {dates:"2020-07-23",times:"14:21:44",status:"商品已下单"},
        {dates:"2020-07-24",times:"16:21:44",status:"商品已揽件"}
      ]


    };
  },
  methods: {}
};
</script>
<style scoped>
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}
.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  margin-top: 15px;
  padding-bottom: 10px;
}
.yuansdj {
  width: 95%;
  margin: 10px auto;
  border: solid 1px rgb(195, 194, 194);
}
.yuansdj_btm {
  margin: 10px auto;
  width: 96%;
}
.yuansdj_address > span {
  margin-right: 50px;
}
.yuansdj_shu{
  text-align: right;
  margin: 10px 0px;
}
.yuansdj_shu>div{
  width: 100px;
}
.logistics{
  background-color: rgb(195, 194, 194);
}
</style>